.expense-tracker-record {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;

  .header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

    .nav-title {
      font-size: 1.2rem;
      font-weight: 500;
      color: #333;
    }
  }

  .main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .record-content {
      flex: 1;

      .transaction-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        margin-bottom: 1rem;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s ease;

        &:active {
          transform: scale(0.98);
        }

        .transaction-info {
          display: flex;
          flex-direction: column;
          gap: 0.5rem;

          .category-wrapper {
            display: flex;
            align-items: center;
            gap: 0.5rem;

            .category {
              font-size: 1rem;
              font-weight: 500;
              color: #333;
            }
          }

          .date {
            font-size: 0.85rem;
            color: #666;
          }
        }

        .amount {
          font-size: 1.1rem;
          font-weight: 500;
          color: #ff4d8f;
        }
      }
    }

    .loading-state {
      text-align: center;
      padding: 1rem;
      color: #666;
      font-size: 0.9rem;
    }
  }

  .footer {
    display: flex;
    justify-content: space-around;
    padding: 0.5rem;
    background-color: #f8f8f8;
    border-top: 1px solid #e0e0e0;

    .footer-btn {
      font-size: 1rem;
      color: #333;
      cursor: pointer;

      &:hover {
        color: #ff4d8f;
      }
    }
  }
}